<template>
  <div class="audition78">
    <p>1. @media媒体查询，不同的宽度执行不同的css代码</p>
    <p>2. flex弹性布局</p>
    <p>3. rem</p>
    <v-md-preview :text="text1" />
  </div>
</template>

<script>
const prefix = '``` js'
const suffix = '```'
export default {
  name: 'Audition78',
  data() {
    return {
      text1: `${prefix}
      (function (win) {
        function setUnitA() {
          var W = document.documentElement.clientWidth;
          if (W >= 1080) {
              W = 1080;
          }
          document.documentElement.style.fontSize = W / 10.8 + "px";
        }
        var h = null;
        window.addEventListener("resize", function () { clearTimeout(h); h = setTimeout(setUnitA, 300); }, false);
        setUnitA();
      })(window);

      // 1080是设计稿宽度， 可以根据自己的设计稿宽度进行修改。
      \n${suffix}`,
    }
  }
}
</script>

<style>

</style>